<template>
    <el-form :model="formData" ref="formref" :rules="rules" label-width="100px" :inline="false" size="normal">
        <el-form-item label="作者名称" prop="authorId">
            <el-input v-model="formData.authorId"></el-input>
        </el-form-item>
        <el-form-item label="视频图片" prop="coverUrl">
            <TuKu v-model="formData.coverUrl"></TuKu>
        </el-form-item>
        <el-form-item label="视频名称" prop="videoName">
            <el-input v-model="formData.videoName"></el-input>
        </el-form-item>
        <el-form-item label="播放量" prop="viewCount">
            <el-input v-model="formData.viewCount"></el-input>
        </el-form-item>
        <el-form-item label="视频源文件" prop="videoUrl">
            <el-input v-model="formData.videoUrl"></el-input>
            <!-- <TuKu v-model="formData.videoUrl"></TuKu> -->
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit(formref)">提交</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>




</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import TuKu from '../../components/TuKu.vue';
import { CategoryApi,VideosApi } from '../../api';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter();
const formref = ref(null);
const formData = reactive({
    videoName: '',
    authorId: '',
    coverUrl: '',
    videoUrl: '',
    viewCount:''
})
const rules = reactive({
    videoName: [
        { required: true, message: '请输入类目的名称', trigger: 'blur' },
        
    ],
})

onMounted(() => {
 
})



const formSubmit = () => {
    VideosApi.insert.call({
        authorId: formData.authorId,
        coverUrl: formData.coverUrl,
        videoName: formData.videoName,
        videoUrl: formData.videoUrl,
        viewCount:formData.viewCount
    }).then(res => {
        console.log(res);
        if (res == 1) {
            ElMessage.success('添加成功')
            router.push('/videos/list')
          
        }
    })
}

const onSubmit = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            formSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.el-input{
    width: 260px;
}
.el-form{
    margin-top: 20px;
}
</style>